<!DOCTYPE html>
<html>
<head>
<meta name="Generator" content="TPshop v1.1" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>boss</title>
<script src='__ROOT__/AI_radar/js/jquery.js'></script>
<!-- <script type="text/javascript" src="jQuery.js"></script> -->
<script type="text/javascript" src="__ROOT__/BOSS/jqplot.js"></script>
<style>
	    body,html{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-y: auto;
        overflow-x: hidden;

        color:#555555;
        background: #fff;
    }
    p{
        margin:0;
    }
    .bossTop,.bossCenZTopW,.bossCenPTopW{
        width: 100%;
        border-bottom: 1px solid #ccc;

    }
    .bossCenP,.bossCenA{
    	display: none
    }
    .bossTops{
        width: calc(100% - 20px);
        line-height: 55px;
        padding: 10px 0;
        display: flex;
    }
    .bossTopZ,.bossTopX,.bossTopA{
        flex: 1;
        text-align: center;
    }
    .spanTop{
        /*border-bottom: 1px solid #4f81d4;*/
        line-height: 55px;
    }
    .colorTop{
        color:#4f81d4;
        border-bottom: 1px solid #4f81d4;
    }
    .bossCenZTop,.bossCenPTop{
        width: 96%;
        padding: 0 2%;
        display: flex;
    }
    .bossCenZTopO,.bossCenPTopO{
        width: 23%;
        border:1px solid #ccc;
        margin: 8px 1%;
        text-align: center;
        line-height: 35px;
        font-size: 13px;
    }
    .bossCenZTopOColor,.bossCenPTopOColor{
        color: #fff;
        background: #4f81d4;
        border:none;
    }
    .bossCenZTopK{
        width: 96%;
        padding: 10px 2%;
    }
    .bossCenZTopKY{
        width: 100%;
        display: flex;
    }
    .bossCenZTopKOne{
        width: calc(30% - 2px);
        margin:5px 1.5% 0 1.5%;
        border:1px solid #ccc;
        display: inline-block;
        height: 70px;
    }
    .bossCenZTopKP1,.bossCenZTopKP2{
        text-align: center;
        font-size: 13px;
    }
    .bossCenZTopKP1{
        margin-top: 10px;
        line-height: 30px;
    }
    .bossCenZTopKP2{
        line-height: 30px;
    }
    .bossCenZTopCHead{
        text-align: center;
        line-height: 50px;
        background: #ddd;
    }
    .bossCenZTopCHead1{
    	text-align: center;
        line-height: 50px;
        background: #eee;
    }
    .bossCenZTopCN{
        margin-top: 15px;
        position: relative;
    }
    .bossCenZTopCNO{
        width: 100%;
        position: relative;
        margin-bottom: 5px;
    }

    .bossCenZTopCNOt { 
        border-top: 35px solid #FF5F1A; 
        border-left: 25px solid transparent; 
        border-right: 25px solid transparent; 
        height: 0; 
        width: 50%; 
        margin: auto;
    } 
    .bossCenZTopCNOz{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
    .bossCenZTopCNOw{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 82%
    }
    .bossCenZTopCNOt1 { 
        border-top: 35px solid #FEAB2B; 
        border-left: 25px solid transparent; 
        border-right: 25px solid transparent; 
        height: 0; 
        width: 35%; 
        margin: auto;
    } 
    .bossCenZTopCNOz1{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
    .bossCenZTopCNOw1{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 74%
    }
    .bossCenZTopCNOt2 { 
        border-top: 35px solid #0FD35D; 
        border-left: 25px solid transparent; 
        border-right: 25px solid transparent; 
        height: 0; 
        width: 20%; 
        margin: auto;
    } 
    .bossCenZTopCNOz2{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
    .bossCenZTopCNOw2{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 68%
    }
    .bossCenZTopCNOt3 { 
        border-top: 35px solid #3EC4D2; 
        border-left: 0px solid transparent; 
        border-right: 0px solid transparent; 
        height: 0; 
        width: 20%; 
        margin: auto;
    } 
    .bossCenZTopCNOz3{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 35px;
        color: #fff;
        /*z-index: 99;*/
    }
    .bossCenZTopCNOw3{
        width: 80px;
        line-height: 35px;
        position: absolute;
        top: 0;
        left: 64%
    }
    .bossCenZTopCNBot{
        width: calc(100% - 20px);
        display: flex;
        padding: 0 10px;
    }
    .bossCenZTopCNBotO{
        width: 25%;
        text-align: center;
        line-height: 35px;
    }
    .bossCenZTopCNBotOW{
        width: 20px;
        display: inline-block;
        position: relative;
    }
    .bossCenZTopCNBotOS{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        background: #FF5F1A;
        /*margin-top: 12.5px;*/
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenZTopCNBotOS1{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        background: #FEAB2B;
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenZTopCNBotOS2{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        background: #0FD35D;
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenZTopCNBotOS3{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        background: #0FD35D;
        position: absolute;
        top: -14px;
        right: 0;
    }


    .bossCenZTopSCs,.bbossCenZTopKHs,.bbossCenZTopXZs{
        width: 96%;
        padding: 0 2%;
        display: flex;
    }
    .bossCenZTopSCsO,.bbossCenZTopKHsO,.bbossCenZTopXZsO{
        width: 29.333%;
        border:1px solid #ccc;
        margin: 8px 2%;
        text-align: center;
        line-height: 35px;
    }
    .bossCenZTopSCsOColor,.bbossCenZTopKHsOColor,.bbossCenZTopXZsOColor{
        color: #fff;
        background: #4f81d4;
        border:none;
    }

	/*扇形统计图*/
    .canvas{
    	width: 320px;
    	height: 300px;
    	margin:auto;
    }
    #can1{
     	width:320px;
     	height:300px;
     	margin: auto
 	}

 	.bossCenZTopSCBot{
        width: calc(100% - 20px);
        display: flex;
        padding: 0 10px;
    }
    .bossCenZTopSCBotO{
        width: 33.33%;
        text-align: center;
        line-height: 35px;
        font-size: 13px;
    }
    .bossCenZTopSCBotOW{
        width: 20px;
        display: inline-block;
        position: relative;
    }
    .bossCenZTopSCBotOS{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        background: #0FD35D;
        /*margin-top: 12.5px;*/
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenZTopSCBotOS1{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        background: #FEAB2B;
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenZTopSCBotOS2{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: inline-block;
        background: #3EC4D2;
        position: absolute;
        top: -14px;
        right: 0;
    }
    .bossCenPMing{
    	width: 100%;
    	height: 50px;
    	border-bottom: 6px solid #eee;
    }
    .bossCenPMOnself{
    	width: calc(100% - 20px);
    	padding: 10px;
    	display: flex;
    	line-height: 30px;
    }
    .bossCenPMNum{
    	width: 50px;
    	text-align: center;
    }
    .bossCenPMImg{
    	width: 40px;
    }
    .bossCenPMImg img{
    	width: 30px;
    	height: 30px;
    	margin: 0 5px;
    	border-radius: 50%;
    }
	.bossCenPMName{
		width: calc(100% - 140px);
		text-indent: 10px;
	}
    .bossCenPMNums{
    	width: 50px;
    	text-align: right;
    }
    .bossCenPMings{
    	width: 100%;
    	height: calc(100% - 160px);
    	overflow-y: auto;
    }
    .bossCenPMOnselfs{
    	width: calc(100% - 20px);
    	padding: 10px;
    	display: flex;
    	line-height: 30px;
    	border-bottom: 1px solid #eaeaea;
    }

    .bossCenAMOnselfs{
    	width: calc(100% - 20px);
    	padding:10px;
    	line-height: 30px;
    	border-bottom: 1px solid #eaeaea;
    	display: flex;
    }
    .bossCenAMNum{
    	width: 40px;
    }
    .bossCenAMImg{
    	width: 40px;
    }
    .bossCenAMName{
    	width: calc(100% - 80px);
    	text-indent: 5px;
    }
    .bossCenAMImg img,.bossCenAMNum img{
		width: 30px;
		height: 30px;
		margin: 0 5px;
		border-radius: 50%;
    }
    .bossCenZTopCNs1,.bossCenZTopCNs2,.bossCenZTopCNs3,.bossCenZTopCNs4{
    	width: 100%;
    	height: 30px;
    	margin-top: 5px;
    	text-align: center;
    	line-height: 30px;
    	font-size: 15px;
    }
    .bossCenZTopCNs1{
    	background: #FF5F1A;
    }
    .bossCenZTopCNs2{
    	background: #FEAB2B;
    }
    .bossCenZTopCNs3{
    	background: #0FD35D;
    }
    .bossCenZTopCNs4{
    	background: #3EC4D2;
    }

    .bossCenZTopCNsL{
    	border-bottom: 105px solid #fff; 
        border-left: 0px solid transparent; 
        border-right: 5rem solid transparent; 
        height: 0; 
        width:20%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .bossCenZTopCNsR{
    	border-bottom: 105px solid #fff; 
        border-left: 5rem solid transparent; 
        border-right: 0px solid transparent; 
        height: 0; 
        width:20%;
        position: absolute;
        top: 0;
        right: 0;
    }
    .bossCenZTopCNsLB{
    	width: calc(20% + 5rem);
    	height: 30px;
    	background: #fff;
    	position: absolute;
        top: 105px;
        left: 0;
    }
    .bossCenZTopCNsRB{
    	width: calc(20% + 5rem);
    	height: 30px;
    	background: #fff;
    	position: absolute;
        top: 105px;
        right: 0;
    }

    .interactionOne{
        width: 100%;
        display: flex;
        line-height: 30px;
        padding: 10px 0;
    }
    .interactionOneL{
        width:80px;
        /*line-height: 30px;*/
    }
    .interactionOneR{
        width:calc(100% - 80px);
        /*line-height: 30px;*/
        display: flex;
    }
    .interactionT{
        /*width:calc(100% - 80px);*/
        height: 10px;
        border-radius: 5px;
        background: red;
        margin: 10px 0;
    }
    .interactionF{
        width: 80px;
        text-indent: 5px;
        font-size: 12px;
    }
    .interactionJd{
        width: 50%;
        height: 10px;
        border-radius: 5px;
        background: red;
        margin: 10px 0;
    }

    .bossCenATu{
    	position: relative;
    }
    .charm{

    }                                                                                                           

</style>

</head>
<body>
	    <div class="boss">
        <div class="bossTop">
            <div class="bossTops">
                <div class="bossTopZ"><span class="spanTop colorTop" did="head1">总览</span></div>
                <div class="bossTopX"><span class="spanTop" did="head2">销售排行</span></div>
                <div class="bossTopA"><span class="spanTop" did="head3">AI分析</span></div>
            </div>
        </div>
        <div class="bossCenZ">
            <div class="bossCenZTopW">
                <div class="bossCenZTop">
                    <div class="bossCenZTopO bossCenZTopOColor" did="kuang0">汇总</div>
                    <div class="bossCenZTopO" did="kuang7">近7天</div>
                    <div class="bossCenZTopO" did="kuang15">近15天</div>
                    <div class="bossCenZTopO" did="kuang30">近30天</div>
                </div>
            </div>
            <div class="bossCenZTopK">
                <div class="bossCenZTopKY">
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">客户总数UV</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">浏览总数PV</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">跟进总数</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                </div>
                <div class="bossCenZTopKY">

                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">沟通总客户数</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">商城销售总额</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">商城订单数</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                </div>
                <div class="bossCenZTopKY">
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">被转发总数</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">被保存次数</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>
                    <div class="bossCenZTopKOne">
                        <p class="bossCenZTopKP1">被点赞总数</p>
                        <p class="bossCenZTopKP2">15</p>
                    </div>

                </div>
            </div>
            <div class="bossCenZTopC">
                <div class="bossCenZTopCHead">成交率漏斗</div>
                <div class="bossCenZTopCN">
                	<div class="bossCenZTopCNs1">123456</div>
                	<div class="bossCenZTopCNs2">123456</div>
                	<div class="bossCenZTopCNs3">123456</div>
                	<div class="bossCenZTopCNs4">123456</div>
                	<div class="bossCenZTopCNsL"></div>
                	<div class="bossCenZTopCNsR"></div>
                	<div class="bossCenZTopCNsLB"></div>
                	<div class="bossCenZTopCNsRB"></div>
                </div>
                <!-- <div class="bossCenZTopCN">
                    <div class="bossCenZTopCNO"><div class="bossCenZTopCNOt"></div><div class="bossCenZTopCNOz">1256</div><div class="bossCenZTopCNOw">258</div></div>
                    <div class="bossCenZTopCNO"><div class="bossCenZTopCNOt1"></div><div class="bossCenZTopCNOz1">1256</div><div class="bossCenZTopCNOw1">258</div></div>
                    <div class="bossCenZTopCNO"><div class="bossCenZTopCNOt2"></div><div class="bossCenZTopCNOz2">1256</div><div class="bossCenZTopCNOw2">258</div></div>
                    <div class="bossCenZTopCNO"><div class="bossCenZTopCNOt3"></div><div class="bossCenZTopCNOz3">1256</div><div class="bossCenZTopCNOw3">258</div></div>
                </div> -->
                <div class="bossCenZTopCNBot">
                    <div class="bossCenZTopCNBotO">
                        <div class="bossCenZTopCNBotOW"><div class="bossCenZTopCNBotOS"></div></div> ≤ 50%
                    </div>
                    <div class="bossCenZTopCNBotO">
                        <div class="bossCenZTopCNBotOW"><div class="bossCenZTopCNBotOS1"></div></div> ≤ 80%
                    </div>
                    <div class="bossCenZTopCNBotO">
                        <div class="bossCenZTopCNBotOW"><div class="bossCenZTopCNBotOS2"></div></div> ≤ 99%
                    </div>
                    <div class="bossCenZTopCNBotO">
                        <div class="bossCenZTopCNBotOW"><div class="bossCenZTopCNBotOS3"></div></div> ≤ 100%
                    </div>
                </div>
            </div>
            <div class="bossCenZTopSC">
                <div class="bossCenZTopCHead">商城订单量&交易金额</div>
                <div class="bossCenZTopSCs">
                    <div class="bossCenZTopSCsO bossCenZTopSCsOColor" sid='sc' did="7">近7天</div>
                    <div class="bossCenZTopSCsO" sid='sc' did="15">近15天</div>
                    <div class="bossCenZTopSCsO" sid='sc' did="30">近30天</div>
                </div>
				<div id="chart1"></div>
            </div>
            <div class="bossCenZTopKH">
            	<div class="bossCenZTopCHead">客户统计</div>
            	<div class="bossCenZTopCHead1">跟进客户数</div>
            	<div class="bbossCenZTopKHs">
                    <div class="bbossCenZTopKHsO bbossCenZTopKHsOColor" sid='gj' did="7">近7天</div>
                    <div class="bbossCenZTopKHsO" sid='gj' did="15">近15天</div>
                    <div class="bbossCenZTopKHsO" sid='gj' did="30">近30天</div>
                </div>
				<div id="chart2"></div>
            </div>
            <div class="bossCenZTopXZ">
            	<div class="bossCenZTopCHead1">新增客户数</div>
            	<div class="bbossCenZTopXZs">
                    <div class="bbossCenZTopXZsO bbossCenZTopXZsOColor" sid='xz' did="7">近7天</div>
                    <div class="bbossCenZTopXZsO" sid='xz' did="15">近15天</div>
                    <div class="bbossCenZTopXZsO" sid='xz' did="30">近30天</div>
                </div>
				<div id="chart3"></div>
            </div>
            <div class="bossCenZTopSC">
                <div class="bossCenZTopCHead">客户兴趣占比</div>
                <div class="canvas">
					<canvas id="can1" width="300" height="300"></canvas>
				</div>
				<div class="bossCenZTopSCBot">
                    <div class="bossCenZTopSCBotO">
                        <div class="bossCenZTopSCBotOW"><div class="bossCenZTopSCBotOS"></div></div> 对我感兴趣
                    </div>
                    <div class="bossCenZTopSCBotO">
                        <div class="bossCenZTopSCBotOW"><div class="bossCenZTopSCBotOS1"></div></div> 对产品感兴趣
                    </div>
                    <div class="bossCenZTopSCBotO">
                        <div class="bossCenZTopSCBotOW"><div class="bossCenZTopSCBotOS2"></div></div> 对公司感兴趣
                    </div>
                   
                </div>
				
            </div>
            <div class="bossCenZTopXZ">
            	<div class="bossCenZTopCHead1">近15日客户活跃度</div>
				<div id="chart4"></div>
            </div>
            <div class="bossCenZTopXZ">
            	<div class="bossCenZTopCHead1">客户与我的互动</div>
				<!-- <div id="chart5"></div> -->
				<div class="interaction">
                    <div class="interactionOne">
                        <div class="interactionOneL">点赞</div>
                        <div class="interactionOneR">
                            <div class="interactionT"><!-- <div class="interactionJd"></div> --></div>
                            <div class="interactionF">50%</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width:100%;height:30px"></div>
        </div>
        <div class="bossCenP">
        	<div class="bossCenPTopW">
                <div class="bossCenPTop">
                    <div class="bossCenPTopO bossCenPTopOColor" did="kuang0">按客户人数</div>
                    <div class="bossCenPTopO" did="kuang7">按订单量</div>
                    <div class="bossCenPTopO" did="kuang15">按互动率</div>
                    <div class="bossCenPTopO" did="kuang30">按成交率区间</div>
                </div>
            </div>
            <div class="bossCenPMing">
            	<div class="bossCenPMOnself">
            		<div class="bossCenPMNum">2</div>
            		<div class="bossCenPMImg"><img src="http://resource.17jxyx.com/tmp/wxf172669daf23e115.o6zAJszXluk01q4Fu3G9ljYYMo-Q.SZrnbNS57SRifab8f2fd3b694534c300849c0fe0a9df.jpg" alt=""></div>
            		<div class="bossCenPMName">张小星</div>
            		<div class="bossCenPMNums">50</div>
            	</div>
            </div>
            <div class="bossCenPMings">
            	<div class="bossCenPMOnselfs" onclick="window.location.href='https://business.17jxyx.com/pages/BOSS/particulars.html?id=0'">
            		<div class="bossCenPMNum">1</div>
            		<div class="bossCenPMImg"><img src="" alt=""></div>
            		<div class="bossCenPMName">李四</div>
            		<div class="bossCenPMNums">9950</div>
            	</div>
            	<div style="width: 100%;height: 30px;"></div>
            </div>
        </div>



        <div class="bossCenA">
            <div class="bossCenAs">
            	<div class="bossCenAMOnselfs" sid='1'>
            		<div class="bossCenAMNum"><img src="http://resource.17jxyx.com/tmp/wxf172669daf23e115.o6zAJszXluk01q4Fu3G9ljYYMo-Q.SZrnbNS57SRifab8f2fd3b694534c300849c0fe0a9df.jpg" alt=""></div>
            		<div class="bossCenAMImg"><img src="http://resource.17jxyx.com/tmp/wxf172669daf23e115.o6zAJszXluk01q4Fu3G9ljYYMo-Q.SZrnbNS57SRifab8f2fd3b694534c300849c0fe0a9df.jpg" alt=""></div>
            		<div class="bossCenAMName">张三</div>
            	</div>
            	<div class="bossCenAMOnselfs" sid='2'>
            		<div class="bossCenAMNum"><img src="http://resource.17jxyx.com/tmp/wxf172669daf23e115.o6zAJszXluk01q4Fu3G9ljYYMo-Q.SZrnbNS57SRifab8f2fd3b694534c300849c0fe0a9df.jpg" alt=""></div>
            		<div class="bossCenAMImg"><img src="http://resource.17jxyx.com/tmp/wxf172669daf23e115.o6zAJszXluk01q4Fu3G9ljYYMo-Q.SZrnbNS57SRifab8f2fd3b694534c300849c0fe0a9df.jpg" alt=""></div>
            		<div class="bossCenAMName">李四</div>
            	</div>
            	<div class="bossCenAMOnselfs" sid='3'>
            		<div class="bossCenAMNum"><img src="http://resource.17jxyx.com/tmp/wxf172669daf23e115.o6zAJszXluk01q4Fu3G9ljYYMo-Q.SZrnbNS57SRifab8f2fd3b694534c300849c0fe0a9df.jpg" alt=""></div>
            		<div class="bossCenAMImg"><img src="http://resource.17jxyx.com/tmp/wxf172669daf23e115.o6zAJszXluk01q4Fu3G9ljYYMo-Q.SZrnbNS57SRifab8f2fd3b694534c300849c0fe0a9df.jpg" alt=""></div>
            		<div class="bossCenAMName">王五</div>
            	</div>
            	<!-- <div class="bossCenATu">
            		<div class="canvas">
						<canvas id="can2" width="300" height="300"></canvas>
					</div>
            	</div> -->
<!-- <div class='bossCenATu'><div class='canvas'><canvas id='can2' width='300' height='300'></canvas></div></div> -->
            	<!-- <div style="width: 100%;height: 30px;"></div> -->
            </div>
        </div>



    </div>


	




	<script type="text/javascript">
	bossColor("spanTop","colorTop")
    bossColor("bossCenZTopO","bossCenZTopOColor")
    bossColor("bossCenZTopSCsO","bossCenZTopSCsOColor")
    bossColor("bbossCenZTopKHsO","bbossCenZTopKHsOColor")
    bossColor("bbossCenZTopXZsO","bbossCenZTopXZsOColor")

    bossColor("bossCenPTopO","bossCenPTopOColor")

    $('.jqplot-table-legend').css("display","none")

	// console.log(window.screen.availHeight)
	// alert(window.screen.availHeight)
	var availHeight = window.screen.availHeight - 170
	$(".bossCenPMings").css("height",availHeight)

	var nums = 80;
    var cla = "calc("+nums+"% - 80px)"
    $(".interactionT").css("width",cla)
    $(".interactionF").html(nums+"%")

    function bossColor(a,b){
        $("."+a).each(function(index,dom){
            dom.onclick = function(){
                $("."+a).each(function(indexs,doms){
                    doms.classList.remove(b)
                })
                dom.classList.add(b)
                var dids = dom.getAttribute("did")
                console.log(dids)
                var dians;
                var dayss;
                if(dids == "head1"){
                	$(".bossCenZ").css("display","block")
                	$(".bossCenP").css("display","none")
                	$(".bossCenA").css("display","none")
                	$("body").css("overflow-y","auto")

                }
                if(dids == "head2"){
                	$(".bossCenZ").css("display","none")
                	$(".bossCenP").css("display","block")
                	$(".bossCenA").css("display","none")
                	$("body").css("overflow","hidden")
                }
                if(dids == "head3"){
                	$(".bossCenZ").css("display","none")
                	$(".bossCenP").css("display","none")
                	$(".bossCenA").css("display","block")
                }
                if(dom.getAttribute("sid") == "sc"){
                	var chart1s = $("#chart1").children()
	                if(chart1s.length>0){
	                    chart1s.each(function(doms1,inds1){
	                        inds1.remove()
	                    })
	                }
	                if(dids == "7"){
	                	 qingkong()
	                	dians = [[3,6,8,1,11,22,4]];
	                	dayss = [10.15,'',10.17,'',10.19,'',10.21]
	                	zhex(dians,dayss,"chart1",1)
	                }
	                if(dids == "15"){
	                	 qingkong()
	                	dians = [[3,6,8,1,11,22,4,20,15,1,29,18,4,6,18]];
	                	dayss = ['',10.15,'','','',10.19,'','','',10.23,'','','',10.27,'']
	                	zhex(dians,dayss,"chart1",1)
	                }
	                if(dids == "30"){
	                	 qingkong()
	                	dians = [[3,6,8,1,11,22,4,20,15,1,29,18,4,6,18,3,6,8,1,11,22,4,20,15,1,29,18,4,6,18]];
	                	dayss = ['',10.02,'','','','','',10.08,'','','','','','',10.15,'','','','','',10.21,'','','','','','',10.27,'','']
	                	zhex(dians,dayss,"chart1",1)
	                }
                }

                var dians2;
                var dayss2;
                if(dom.getAttribute("sid") == "gj"){
                	var chart2s = $("#chart2").children()
	                if(chart2s.length>0){
	                    chart2s.each(function(doms1,inds1){
	                        inds1.remove()
	                    })
	                }
	                if(dids == "7"){
	                	 qingkong()
	                	dians2 = [[3,6,8,1,11,22,4]];
	                	dayss2 = [10.15,'',10.17,'',10.19,'',10.21]
	                	zhex(dians2,dayss2,"chart2",1)
	                }
	                if(dids == "15"){
	                	 qingkong()
	                	dians2 = [[3,6,58,1,11,22,4,50,15,1,29,18,4,6,18]];
	                	dayss2 = ['',10.15,'','','',10.19,'','','',10.23,'','','',10.27,'']
	                	zhex(dians2,dayss2,"chart2",1)
	                }
	                if(dids == "30"){
	                	 qingkong()
	                	dians2 = [[3,6,8,1,11,22,4,20,15,1,29,18,4,6,18,3,6,8,1,11,22,4,20,15,1,29,18,4,6,18]];
	                	dayss2 = ['',10.02,'','','','','',10.08,'','','','','','',10.15,'','','','','',10.21,'','','','','','',10.27,'','']
	                	zhex(dians2,dayss2,"chart2",1)
	                }
                }

                var dians3;
                var dayss3;
                if(dom.getAttribute("sid") == "xz"){
                	var chart3s = $("#chart3").children()
	                if(chart3s.length>0){
	                    chart3s.each(function(doms1,inds1){
	                        inds1.remove()
	                    })
	                }
	                if(dids == "7"){
	                	 qingkong()
	                	dians3 = [[3,6,8,51,11,22,4]];
	                	dayss3 = [10.15,'',10.17,'',10.19,'',10.21]
	                	zhex(dians3,dayss3,"chart3",1)
	                }
	                if(dids == "15"){
	                	 qingkong()
	                	dians3 = [[3,6,8,1,11,22,4,20,15,1,49,18,4,6,18]];
	                	dayss3 = ['',10.15,'','','',10.19,'','','',10.23,'','','',10.27,'']
	                	zhex(dians3,dayss3,"chart3",1)
	                }
	                if(dids == "30"){
	                	 qingkong()
	                	dians3 = [[3,6,8,1,11,22,4,20,15,1,29,38,4,6,18,3,6,8,1,11,52,4,20,15,1,29,18,4,6,18]];
	                	dayss3 = ['',10.02,'','','','','',10.08,'','','','','','',10.15,'','','','','',10.21,'','','','','','',10.27,'','']
	                	zhex(dians3,dayss3,"chart3",1)
	                }
                }

            }
        })
    }
    function qingkong(){
    	$(".jqplot-series-0").each(function(as,df){
    		df.remove()
    	})
    	$(".jqplot-xaxis-tick").each(function(asx,dfx){
    		dfx.remove()
    	})
    }



    var dian = [[3,6,8,1,11,22,4]];
    var days = [10.15,'',10.17,'',10.19,'',10.21]
    var dians4 = [[3,6,8,1,11,25,4,20,15,1,29,18,4,6,18]];
    var dayss4 = ['',10.15,'','','',10.19,'','','',10.23,'','','',10.27,'']
	var dians5 = [[3,6,8,1,11,22]];
    var dayss5 = ['点赞','评论','保存电话','拨打电话','资讯产品','添加微信']
    function zhex(data,x,ids,zhe){
    	var maxNum=0;
        data[0].forEach(function(a,b){
            if(a>maxNum){
                maxNum = a
            }
        })
        var nums = 1;
        for(i=0;maxNum>10;i++){
            nums = nums*10
            maxNum = maxNum / 10
        }
        var nus = Math.ceil(maxNum) * nums
	  var data_max = nus; //Y轴最大刻度
	  // var line_title = ["A","B","c","d"]; //曲线名称
	  var line_title = [' '];
	  var y_label = ""; //Y轴标题
	  var x_label = ""; //X轴标题
	  var title = ""; //统计图标标题
	  j.jqplot.diagram.base(ids, data, line_title, "", x, x_label, y_label, data_max, zhe);
    	
    }
    zhex(dian,days,"chart1",1)
    zhex(dian,days,"chart2",1)
    zhex(dian,days,"chart3",1)
    zhex(dians4,dayss4,"chart4",1)
    // zhex(dians5,dayss5,"chart5",2)


    $(function(){
		var canv=document.getElementById("can1");
		var ctx=canv.getContext("2d");
		var num=[500,300,450];
		var col=["#0FD35D","#FEAB2B","#3EC4D2"]
		var j=0,j1=0,j2=0,jiao=0;
		var sun=0;
		for(var i=0;i<num.length;i++){
			sun=sun+num[i];
		}
		var nums = num[0];
		var numInd = 0;
		for(var l=0;l<num.length;l++){
			if(nums < num[l]){
				nums = num[l]
				numInd = l
			}
		}
		var ss1 = 360/sun
		var num1 = ss1*num[0]
		var num2 = ss1*num[1]
		var num3 = ss1*num[2]
		var num1s = num1/2
		var num2s = num2/2
		var num3s = num3/2
		var arr = [-270-num1s,-270-num2s-num1,-270-num1-num2-num3s]
		for(var i=0;i<num.length;i++){
			j=2*Math.PI*num[i]/sun;
			j2=j1+j;
			
			var ns = ss1*num[i]
			ctx.beginPath();
			ctx.fillStyle=col[i];
			x=150+Math.sin((2*Math.PI/360)*+arr[i])*120;
			y=150+Math.cos((2*Math.PI/360)*+arr[i])*120;
			x1=150+Math.sin((2*Math.PI/360)*+arr[i])*100;
			y1=150+Math.cos((2*Math.PI/360)*+arr[i])*100;
			x3=150+Math.sin((2*Math.PI/360)*+arr[i])*130;
			y3=150+Math.cos((2*Math.PI/360)*+arr[i])*130;
			
			if(i==numInd){
				ctx.arc(150,150,110,j1,j2,false);
				ctx.lineTo(150,150);
			}else{
				ctx.arc(150,150,100,j1,j2,false);
				ctx.lineTo(150,150);
			}
			
			ctx.moveTo(x,y);
			ctx.lineTo(x1,y1);
			ctx.fillText(num[i],x3,y3)
			ctx.stroke();
			ctx.closePath();

			ctx.fill();
			jiao=j1+j/2;
			ctx.font="20px Arial";
			ctx.fillStyle="#000";
			j1=j1+j;
		}
	})
	// var num=[500,300,450,200,600,400];

	function canvers(num,canv){
		console.log(num,canv)
		var max = 0;
		num.forEach(function(doms,inds){
			if(max < doms){
				max = doms
			}
		})
		var sps = 100/max
		var nums = 0;
		for(i=0;max>10;i++){
			nums++
			max = max / 10
		}
		console.log(nums)
		// if(max>10){
		// 	nums++
		// 	max = max / 10
		// }
		var numArr=[]
		num.forEach(function(doms,inds){
			// if(nums>1){
			// 	var nums1 = (nums-1)*10
			// 	numArr.push(doms/nums1 *sps)


			// }else{
				numArr.push(doms *sps)
			// }
			// numArr.push(doms/(num-1))
		})
		console.log(numArr)
		// var canv=document.getElementById("can2");
		var ctx=canv.getContext("2d");
		ctx.clearRect(0,0,300,300)
		// var num=[500,300,450,200,600,400];
		// var col=["#F00","#00f","#060"]
		var j=0,j1=0,j2=0,jiao=0;
		// var sun=0;
		// for(var i=0;i<num.length;i++){
		// 	sun=sun+num[i];
		// }
		// var nums = num[0];
		// var numInd = 0;
		// for(var l=0;l<num.length;l++){
		// 	if(nums < num[l]){
		// 		nums = num[l]
		// 		numInd = l
		// 	}
		// }
		// console.log(nums)
		// var ss1 = 360/sun
		// var num1 = ss1*num[0]
		// var num2 = ss1*num[1]
		// var num3 = ss1*num[2]
		// var num1s = num1/2
		// var num2s = num2/2
		// var num3s = num3/2
		// var arr = [-270-num1s,-270-num2s-num1,-270-num1-num2-num3s]
		var name = ["个人魅力值","获客能力值","产品推广值","客户互动值","销售主动性","官网推广度"]
		var ns=30
		for(var i=0;i<num.length;i++){

			ctx.beginPath();
			x3=160+Math.sin((2*Math.PI/360)*ns)*100;
			y3=150+Math.cos((2*Math.PI/360)*ns)*100;
			x4=160+Math.sin((2*Math.PI/360)*ns)*0;
			y4=150+Math.cos((2*Math.PI/360)*ns)*0;
			ctx.moveTo(x3,y3);
			ctx.lineTo(x4,y4);
			// ctx.fillText(arr[i],x3,y3)
			ctx.strokeStyle = "#eaeaea"
			ctx.stroke();
			ctx.closePath();
			x5=160+Math.sin((2*Math.PI/360)*ns)*100;
			y5=150+Math.cos((2*Math.PI/360)*ns)*100;
			
			if(i==0){
				x=160+Math.sin((2*Math.PI/360)*ns)*numArr[0];
				y=150+Math.cos((2*Math.PI/360)*ns)*numArr[0];
				xs=160+Math.sin((2*Math.PI/360)*ns)*numArr[0];
				ys=150+Math.cos((2*Math.PI/360)*ns)*numArr[0]+20;
				ns+=60
				x1=160+Math.sin((2*Math.PI/360)*ns)*numArr[1];
				y1=150+Math.cos((2*Math.PI/360)*ns)*numArr[1];

			}
			if(i==1){
				x=160+Math.sin((2*Math.PI/360)*ns)*numArr[1];
				y=150+Math.cos((2*Math.PI/360)*ns)*numArr[1];
				xs=160+Math.sin((2*Math.PI/360)*ns)*numArr[1];
				ys=150+Math.cos((2*Math.PI/360)*ns)*numArr[1]+5;
				ns+=60
				x1=160+Math.sin((2*Math.PI/360)*ns)*numArr[2];
				y1=150+Math.cos((2*Math.PI/360)*ns)*numArr[2];

			}
			if(i==2){
				x=160+Math.sin((2*Math.PI/360)*ns)*numArr[2];
				y=150+Math.cos((2*Math.PI/360)*ns)*numArr[2];
				xs=160+Math.sin((2*Math.PI/360)*ns)*numArr[2];
				ys=150+Math.cos((2*Math.PI/360)*ns)*numArr[2]-20;
				ns+=60
				x1=160+Math.sin((2*Math.PI/360)*ns)*numArr[3];
				y1=150+Math.cos((2*Math.PI/360)*ns)*numArr[3];

			}
			if(i==3){
				x=160+Math.sin((2*Math.PI/360)*ns)*numArr[3];
				y=150+Math.cos((2*Math.PI/360)*ns)*numArr[3];
				xs=160+Math.sin((2*Math.PI/360)*ns)*numArr[3]-50;
				ys=150+Math.cos((2*Math.PI/360)*ns)*numArr[3]-20;
				ns+=60
				x1=160+Math.sin((2*Math.PI/360)*ns)*numArr[4];
				y1=150+Math.cos((2*Math.PI/360)*ns)*numArr[4];

			}
			if(i==4){
				x=160+Math.sin((2*Math.PI/360)*ns)*numArr[4];
				y=150+Math.cos((2*Math.PI/360)*ns)*numArr[4];
				xs=160+Math.sin((2*Math.PI/360)*ns)*numArr[4]-50;
				ys=150+Math.cos((2*Math.PI/360)*ns)*numArr[4]+5;
				ns+=60
				x1=160+Math.sin((2*Math.PI/360)*ns)*numArr[5];
				y1=150+Math.cos((2*Math.PI/360)*ns)*numArr[5];

			}
			if(i==5){
				x=160+Math.sin((2*Math.PI/360)*ns)*numArr[5];
				y=150+Math.cos((2*Math.PI/360)*ns)*numArr[5];
				xs=160+Math.sin((2*Math.PI/360)*ns)*numArr[5]-50;
				ys=150+Math.cos((2*Math.PI/360)*ns)*numArr[5]+20;
				ns+=60
				x1=160+Math.sin((2*Math.PI/360)*ns)*numArr[0];
				y1=150+Math.cos((2*Math.PI/360)*ns)*numArr[0];

			}
			x6=160+Math.sin((2*Math.PI/360)*ns)*100;
			y6=150+Math.cos((2*Math.PI/360)*ns)*100;
			ctx.beginPath();
			ctx.moveTo(x5,y5);
			ctx.lineTo(x6,y6);
			ctx.strokeStyle = "#eaeaea"
			ctx.stroke();
			ctx.closePath();

			ctx.beginPath();
			ctx.moveTo(x,y);
			ctx.lineTo(x1,y1);
			ctx.lineTo(x4,y4);
			ctx.lineTo(x,y);
			ctx.strokeStyle = "#4f81d4";
			ctx.fillText(name[i],xs,ys);
			ctx.font="10px Arial";
			ctx.stroke();
			ctx.closePath();
			ctx.fillStyle = "#4f81d4"
			ctx.fill();
		}

	}
	$(".bossCenAMOnselfs").each(function(ind,dom){
		dom.onclick = function(){
			if(document.querySelector(".bossCenATu")){
				document.querySelector(".bossCenATu").remove()
			}
			// <div class='charm'>个人魅力值</div>
			var canva = "<div class='bossCenATu'><div class='canvas'><canvas id='can2' width='320' height='300'></canvas></div></div>"
			console.log(this)
			$(this).after(canva)
			console.log(dom.getAttribute("sid"))
			var num;
			if(dom.getAttribute("sid") == 1){
				num=[500,500,500,500,500,500];
			}
			if(dom.getAttribute("sid") == 2){
				num=[400,100,500,500,300,400];
			}
			if(dom.getAttribute("sid") == 3){
				num=[200,500,1050,200,800,200];
			}
			canvers(num,document.getElementById("can2"))
		}
	})

  

</script>
</body>
</html>

